<template>
  <!-- 明细页面弹出框-->
  <el-dialog
    :close-on-click-modal="true"
    :visible.sync="open"
    append-to-body
    center
    title="小额预对账应答信息-查看原交易列表"
    width="1024px"
    @close="closeFn"
  >
    <div class="discountReceipt-pick-operate-box">
      <div class="operate-box-bottom">
        <div class="bottom-content">
          <ht-table
            ref="dataTable"
            :dictMap="dictMap"
            :initData="false"
            :multi-select="false"
            :queryParams="queryParams"
            :reqConfig="reqConfig"
            :showSerialNumber="false"
            :tableBindColumns="tableBindColumns"
            defaultEventKey="detailsTable"
          >
            <template v-slot:operate>
              <el-table-column
                align="center"
                class-name="small-padding fixed-width"
                fixed="right"
                label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <ht-button-group
                    :buttonList="[
                      {
                        label: '查看明细',
                        // permission: 'user:xxx:xxx',
                        doFunc: () => {
                          handleAction('details', scope.row);
                        },
                      },
                    ]"
                  />
                </template>
              </el-table-column>
            </template>
          </ht-table>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeFn">关闭</el-button>
    </div>
    <details-dialog :id="id" ref="detailsDialog" :dictMap="dictMap" :formData="formData"></details-dialog>
  </el-dialog>
</template>
<script>
import { detailsApiUrlConfig, innerDetail } from "@/api/cnaps/bizMng/beps_pre_reconciliation_query.js";
import detailsDialog from "./bepsPreInnerDetails.vue";
export default {
  name: "Details",
  components: { detailsDialog },
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    id: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      reqConfig: detailsApiUrlConfig,
      formData: {},
      // 查询参数
      queryParams: {
        id: "",
      },
      tableBindColumns: [
        { prop: "id", label: "交易流水号", width: 180 },
        { prop: "workdate", label: "工作日期", type: "date" },
        { prop: "pkgType", label: "报文类型", dictCode: "PKG_TYPE_BEPS_RECON", width: 180 },
        { prop: "drct", label: "来往账标志", dictCode: "DRCTCODE", width: 180 },
        { prop: "bizType", label: "业务类型", dictCode: "BIZ_TYPE" },
        { prop: "sender", label: "发起行行号", width: 180 },
        { prop: "rcver", label: "接收行行号", width: 180 },
        { prop: "payerName", label: "付款人名称", width: 180 },
        { prop: "payeeName", label: "收款人名称", width: 180 },
        { prop: "procStatus", label: "中心状态", dictCode: "PROCESSSTATUS" },
        { prop: "amount", label: "交易金额", type: "price" },
      ],
      // 是否显示弹出层
      open: false,
    };
  },
  mounted() {},
  watch: {
    open(d) {
      if (d) {
        this.$nextTick(() => {
          this.$set(this.queryParams, "id", this.id);
          this.$refs.dataTable.doQuery();
        });
      }
    },
  },
  methods: {
    handleAction(type, row = {}) {
      switch (type) {
        case "details":
          // 明细
          innerDetail(row).then((res) => {
            this.formData = _.clone(res.result);
            this.$refs.detailsDialog.show();
          });
          break;
      }
    },
    // 表单重置
    reset() {
      this.resetForm("logForm");
      // this.$set(this, "form", {});
    },
    closeFn() {
      this.open = false;
    },
    show() {
      this.open = true;
    },
    cancel() {
      this.open = false;
      this.reset();
    },
  },
};
</script>
<style></style>
